@import "../style/theme-color";

.d-input-number {
  display: inline-flex;
  min-width: 252px;
  height: 48px;
  line-height: 1;

  .disabled {
    opacity: .5;
    cursor: not-allowed !important;
  }

  &.active {
    &.filled {
      .d-input-number-wrap {
        border-color: @gray;
      }
    }

    .d-input-number-wrap {
      border-color: @orange;

      .d-input-placeholder {
        padding: 0;
        top: 7px;
        line-height: 16px;
        font-size: 12px;
        color: #f08519;
        cursor: default;
        font-weight: bold;
      }
    }
  }

  > * {
    height: 100%;
    box-sizing: border-box;
    border-color: @gray;
  }

  .plus, .minus {
    width: 48px;
    border: 1px solid;
    background: url("") center center / 100% 100%;
    cursor: pointer;
  }

  .plus {
    background-image: url("");
  }

  .d-input-number-wrap {
    position: relative;
    width: calc(100% - 108px);
    height: 47px;
    margin: 0 6px;
    border-bottom: 1px solid;

    .d-input-placeholder {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      padding: 16px 12px 7px;
      font-size: 24px;
      color: #646464;
      cursor: text;
      transition: 0.3s;
      box-sizing: border-box;
    }

    > input {
      position: absolute;
      left: 0;
      bottom: 3px;
      z-index: 2;
      width: 100%;
      height: 24px;
      text-align: center;
      padding: 0 12px;
      border: none;
      box-sizing: border-box;
      font-size: 18px;
      color: #383838;
      background: transparent;
      outline: none;
      caret-color: #f08519;

      &:disabled {
        opacity: .5;
        cursor: not-allowed;
      }
    }
  }
}
